<template>
  <div id="monitor3"> 
   
   <div class="con">
         <div class="top">
             <div class="top_item" style="flex: 1;">
                 <img class="top_img" src="@/assets/images/png1.png" />
                    挂卖分析
                   <!-- <el-form ref="form" :model="form" label-width="80px">  
                    <el-form-item label="" label-width="0px" style="margin-left:10px;margin-bottom:0px !important;">
                       <el-date-picker 
                       :picker-options="pickerOptions" @change="select_change" type="date" placeholder="选择日期" format="yyyy-MM-dd" value-format="yyyy-MM-dd"  v-model="form.time"  style="width:150px;"></el-date-picker>
                    </el-form-item>
                 </el-form> -->
             </div> 
             <!-- <div class="top_item" >
                 <div class="see_but" @click="go_but()" style="margin-right:10px;">查看详情</div>
             </div> -->
             <div>
                 <img style="width:30px;height:30px;" src="@/assets/images/sx.png" @click="refresh_but()" />
             </div>
         </div>
         <div class="box">
              <div class="orchard" v-for="(item,index) in list_data" :key="index">
                <div class="orchard_top " :class="'orchard_top_color' + index ">
                     <div class="top1_item">
                           <img class="item_b_1_img" v-if="index == 0" src="@/assets/images/zy1.png" />
                            <img class="item_b_1_img" v-if="index == 1" src="@/assets/images/zy2.png" />
                            <img class="item_b_1_img" v-if="index == 2" src="@/assets/images/zy3.png" />
                            <img class="item_b_1_img" v-if="index == 3" src="@/assets/images/zy4.png" />
                            {{ item.title }}
                    </div> 
                    
                    <div class="zt_but">
                            <span v-if="item.is_open == 1">开放中</span>
                            <span v-if="item.is_open == 0">关闭中</span>
                    </div> 
                </div>
                <div class="orchard_con">
                    <div class="orchard_con1">
                        <div class="item_a">
                              <div class="item_b">
                                  <div class="item_b_1">预约人数</div>
                                  <div class="item_b_2">{{ item.appointment_count }}</div>
                              </div>
                         </div>
                         <div class="item_a" style="margin-top:20px;">
                              <div class="item_b">
                                  <div class="item_b_1">预约抢拍（一人多次）</div>
                                  <div class="item_b_2">{{ item.appointment_buy_count }}</div>
                              </div>
                         </div>
                    </div>
                    <div class="orchard_con2">
                        <div class="item_a">
                                <div class="item_b">
                                  <div class="item_b_1">产出预约人数</div>
                                <div class="item_b_2">{{ item.produced_appointment_count }}</div>
                              </div>
                         </div>
                         <div class="item_a" style="margin-top:20px;">
                           <div class="item_b">
                                  <div class="item_b_1">新预约人数  
                                    <!-- <img  style="width:15px;height:15px;margin-left:8px;" src="@/assets/images/wh.png" /> -->
                                  </div>
                                  <div class="item_b_2">{{ item.appointment_no_produced_count }}</div>
                              </div>
                         </div>
                    </div>
                    <div class="orchard_con3">
                        <div class="item_a" style="display:flex;">
                            <div class="item_b">
                                  <div class="item_b_1">已经产出蜂巢数量</div>
                                  <div class="item_b_2">{{ item.proudcted_count }}</div>
                              </div>
                               <div class="item_b">
                                  <div class="item_b_1">今天产出蜂巢数量</div>
                                  <div class="item_b_2">{{ item.today_proudcted_count }}</div>
                              </div>
                              <div class="item_b">
                                  <div class="item_b_1">前一天金蜜券挂卖数</div>
                                  <div class="item_b_2">{{ item.day_before__onsale_count }}</div>
                              </div>
                         </div>
                         <div class="item_a" style="display:flex;margin-top:20px;">
                              <div class="item_b">
                                  <div class="item_b_1">已经产出蜂巢人数</div>
                                  <div class="item_b_2">{{ item.proudcted_personel_count }}</div>
                              </div>
                              <div class="item_b">
                                  <div class="item_b_1">今天产出蜂巢人数</div>
                                  <div class="item_b_2">{{ item.today_proudcted_personel_count }}</div>
                              </div>
                              <div class="item_b">
                                 
                              </div>
                         </div>
                    </div>
                </div>
              </div>
            


            

            
         </div>
   </div>

</div>
</template>

<script>

export default {
   name: 'monitor3',
  data () {
    return {
       pickerOptions: { // 计费日期的约束条件
        disabledDate(time) {
            return time.getTime() < new Date('2021-02-03').getTime()
            }
      },
      list_data:'',
      form:{
        time:''
      }
    }
  },
   components:{

  },
  created(){
     //this.form.time = this.getNowDate1()
     this.list_fun()
      
  },
  mounted (){
    
  },
  methods: {
     list_fun(){
         this.post("/onsale_analysis/detail", {
            //starttime:this.form.time
	        }).then(res => {
              this.list_data = res.result.splice(0,4);
              console.log(this.list_data,"gggg")
         })
    },
    select_change(){
       this.list_fun()
    },
    refresh_but(){
        this.list_fun()
    },
    go_but(){
    // this.$router.push({
    //     path: '/index/operationdata/Monitor/detailsmonitor3',
    //     query: {
    //         name:'挂卖详情',
    //     }
    // })
  }

  }
}
</script>


<style scoped>
#monitor3{
  padding:2px;
}
.con{
   padding:15px;
   border-radius: 7px;  
   /* box-shadow: rgba(116, 77, 254, 0.1) 0px 0px 7px; */
}
.top{
    display: flex;
    align-items: center;
    justify-content: center;
}
.top_item{   
    display: flex;
    align-items: center;
}
.top_img{
    width: 30px;
    height: 30px;
    margin-right: 10px;
}

.top1_item{
   flex: 1;
   display: flex;
   align-items: center;
   font-size: 14px;
}
.top1_img{
  width:25px;
  height:25px;
  margin-right: 10px;
}
.item_a{
  display:flex;
  padding:0px 15px;
}
.item_b{
  flex: 1;
}
.item_b_1{
  font-size: 14px;
  font-weight: 500;
  color: #5E6C84;
  display: flex;
  align-items: center;
  margin-top: 20px;
}
.item_b_1_img{
  width:20px;
  height: 20px;
  margin-right:5px;
}
.item_b_2{
  margin-top: 10px;
  font-size: 30px;
  font-weight: 500;
  color: #344563;
}
.zt_but{
  border:1px solid white;
  border-radius:3px;
  height:25px;
  line-height:25px;
  text-align: center;
  padding:0px 10px;
  color:white;
  font-size:12px;
}
/* .box{
    padding: 10px;
    height:200px;
} */
.orchard{
  margin-top: 20px;
  box-shadow: rgba(116, 77, 254, 0.1) 0px 0px 7px;
}
.orchard:first-child{
   margin-top: 10px;
}
.orchard_top{
  height:45px;
  display: flex;
  align-items: center;
  padding:0px 10px; 
  
  border-radius: 7px 7px 0px 0px;
}
.orchard_top_color0{
  background: linear-gradient(-90deg, #7662FF, #FFFFFF);
}
.orchard_top_color1{
  background: linear-gradient(-90deg, #FFD162, #FFFFFF);
}
.orchard_top_color2{
  background: linear-gradient(-90deg, #FF626D, #FFFFFF);
}
.orchard_top_color3{
  background: linear-gradient(-90deg, #0ACD5E, #FFFFFF);
}
.orchard_con{
  padding:10px 10px;
  display: flex;
  height:250px;
}
.orchard_con1{   
    border-radius:7px;  
    background: #F0EFFF;
    width: 250px;
    height: 100%;
    padding:20px;
    box-sizing: border-box;
}
.orchard_con2{
    border-radius:7px;  
    background: #FFF8F0;
    width: 250px;
    height: 100%;
    margin-left:40px;
    padding:20px;
    box-sizing: border-box;
}
.orchard_con3{
    border-radius:7px;  
    background: #FAFFFB;
    flex:1;
    height: 100%;
    margin-left:40px;
    padding:20px;
    box-sizing: border-box;
}


.el-input--suffix>>>.el-input__inner{
  height:35px;
}

.see_but{
    width: 90px;
    height: 30px;
    background: #B3C0D1;
    border-radius: 18px;
    text-align: center;
    line-height: 30px;
    color:white;
    font-size: 14px;
    cursor: pointer;
}
</style>